<template>
  <div
    class="shop-header"
    :class="$$FormData.show_content"
    :style="{
      backgroundColor: $$FormData.background_color,
      color: $$FormData.text_color
    }"
    @click="handleClick"
  >
    <img :src="shopInfo.shop_logo" alt class="shop-logo"/>
    <div class="shop-content">
      <div class="shop-primary-row">
        <div class="name-block">
          <div class="name">{{ shopInfo.shop_name }}</div>
          <div
            v-if="$$FormData.switch_branch"
            class="shop-icon"
            :style="{backgroundImage: ShopIcons.getIcon(ShopIcons.arrowDown, $$FormData.text_color)}"
          />
        </div>
        <span v-if="$$FormData.show_content === 'show-address'">距离: {{ formatDistance(shopInfo.distance) }}</span>
      </div>
      <!--显示具体位置-->
      <div v-if="$$FormData.show_content === 'show-address'" class="shop-sub-row">
        <div class="sub">{{ formatShopAddress(shopInfo) }}</div>
        <div class="icon-nav" :style="{borderColor: $$FormData.text_color}">
          <div
            class="shop-icon"
            :style="{backgroundImage: ShopIcons.getIcon(ShopIcons.navigation, $$FormData.text_color)}"
            @click.stop="handleClickNavigation"
          />
        </div>
      </div>
      <!--显示配送方式-->
      <div v-if="$$FormData.show_content === 'show-ship-type'" class="shop-sub-row">
        <div v-if="shopInfo.shop_settings_do.self_pick === 1" class="sub-flex-item">
          <div
            class="shop-icon"
            :style="{backgroundImage: ShopIcons.getIcon(ShopIcons.ok, $$FormData.text_color)}"
          />
          到店自提
        </div>
        <div v-if="shopInfo.shop_settings_do.store_delivery === 1" class="sub-flex-item">
          <div
            class="shop-icon"
            :style="{backgroundImage: ShopIcons.getIcon(ShopIcons.ok, $$FormData.text_color)}"
          />
          配送到家
        </div>
        <div v-if="shopInfo.shop_settings_do.logistics === 1" class="sub-flex-item">
          <div
            class="shop-icon"
            :style="{backgroundImage: ShopIcons.getIcon(ShopIcons.ok, $$FormData.text_color)}"
          />
          快递发货
        </div>
      </div>
      <!--只显示联系方式-->
      <div v-if="$$FormData.show_content === 'only-contact-way'" class="shop-sub-row">
        <div class="sub">TEL: {{ shopInfo.link_phone }}</div>
        <div class="icon-nav" :style="{borderColor: $$FormData.text_color}">
          <div
            class="shop-icon"
            :style="{backgroundImage: ShopIcons.getIcon(ShopIcons.tel, $$FormData.text_color)}"
            @click.stop="handleCallPhone"
          />
        </div>
      </div>
      <!--显示营业时间-->
      <div v-if="$$FormData.show_content === 'show-business-time'" class="shop-sub-row">
        营业时间：{{ formatBusinessTime(shopInfo) }}
      </div>
    </div>
  </div>
</template>

<script>
import * as ShopIcons from './ShopIcons'
import decorMixin from '../decor-mixin'
import Cache, { Keys } from '@/utils/cache'

export default {
  name: 'ShopHeaderPreview',
  mixins: [decorMixin],
  data() {
    return {
      ShopIcons,
      shopInfo: ''
    }
  },
  mounted() {
    this.getShopInfo()
    uni.$on('HomePageOnShow', this.getShopInfo)
  },
  destroyed() {
    uni.$off('HomePageOnShow', this.getShopInfo)
  },
  methods: {
    getShopInfo() {
      const shop = Cache.getItem(Keys.nearestShopInfo)
      if (!shop.shop_logo) {
        shop.shop_logo = require('./default-shop-logo.png')
      }
      this.shopInfo = shop
    },
    // 切换店铺
    handleClick() {
      if (this.$$FormData.switch_branch) {
        uni.navigateTo({ url: '/pages/shop/nearest-shops' })
      }
    },
    // 联系门店
    handleCallPhone() {
      const { link_phone } = this.shopInfo
      if (!link_phone) return uni.showToast({ title: '门店未设置联系方式！', icon: 'none' })
      uni.makePhoneCall({
        phoneNumber: link_phone
      })
    },
    // 导航去门店位置
    handleClickNavigation() {
      const { shop_name, location } = this.shopInfo
      if (!location) return uni.showToast({ title: '未获取到门店位置信息！', icon: 'none' })
      const latitude = location.lat
      const longitude = location.lon
      if (!latitude || !longitude) return uni.showToast({ title: '未获取到门店位置信息！', icon: 'none' })
      uni.openLocation({
        name: `${shop_name} - ${this.formatShopAddress(this.shopInfo)}`,
        latitude,
        longitude
      })
    },
    // 格式化距离
    formatDistance(value) {
      if (value <= 1) return value * 1000 + 'm'
      return value + 'km'
    },
    // 格式化营业时间
    formatBusinessTime(shop) {
      let sh = addZero(shop.start_hours)
      let sm = addZero(shop.start_minute)
      let eh = addZero(shop.end_hours)
      let em = addZero(shop.end_minute)

      function addZero(value) {
        if (value < 10) return '0' + value
        return value
      }

      return `${sh}:${sm}-${eh}:${em}`
    },
    // 格式化店铺地址信息
    formatShopAddress(shop) {
      const { shop_province, shop_city, shop_county, shop_town, shop_add } = shop
      return (shop_province + shop_city + shop_county + shop_town + shop_add) || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-header {
  position: relative;
  padding: 24rpx;
  display: flex;
  line-height: 44rpx;
  align-items: center;

  .shop-logo {
    flex-shrink: 0;
    width: 104rpx;
    height: 104rpx;
    margin-right: 12px;
    border-radius: 50%;
    background-color: #fff;
  }

  .shop-icon {
    position: relative;
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

.shop-content {
  width: 100%;
  font-size: 26rpx;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  .shop-primary-row {
    display: flex;
    justify-content: space-between;

    .name-block {
      display: flex;
      width: 100%;
      overflow: hidden;
      flex-shrink: 1;
      align-items: center;

      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
        font-size: 32rpx;
      }
    }
  }

  .shop-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12rpx;

    .sub {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-shrink: 1;
    }

    .icon-nav {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      margin-left: 24rpx;
      padding: 0 24rpx;
      border-left: 2rpx solid #eee;
    }

    .sub-flex-item {
      display: flex;
      align-items: center;
      flex: 1;

      .shop-icon {
        margin-right: 4px;
      }
    }
  }
}
</style>
